<template>
    <!-- 个人中心 -->
    <div class="module_ userCenter">
        <div class="mb8">
            <p class="bg-e4 pl8 mb8">修改密码</p>
            <el-form ref="userModify" label-position="right" :rules="userRrules" label-width="120px" size="mini" :model="userModify">
                <el-form-item label="旧密码：" prop='old_password'>
                    <el-input type="password" v-model.trim="userModify.old_password" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop='new_password'>
                    <el-input type="password" v-model.trim="userModify.new_password" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="重复新密码：" prop='new_password_confirmation'>
                    <el-input type="password" size="small" v-model.trim="userModify.new_password_confirmation" placeholder="请再次输入新密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading='userModify_btn' @click="submitForm('userModify')">确定</el-button>
                    <el-button @click="resetForm('userModify')">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <p class="bg-e4 pl8 mb8">管理员重置密码</p>
            <el-form ref="adminModify" label-position="right" :rules="adminRules" label-width="120px" size="mini" :model="adminModify">
                <el-form-item label="职员工号：" prop='employee_code'>
                    <el-input v-model.trim="adminModify.employee_code" placeholder="请输入职员工号"></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop='new_password'>
                    <el-input type="password" v-model.trim="adminModify.new_password" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="重复新密码：" prop='new_password_confirmation'>
                    <el-input type="password" size="small" v-model.trim="adminModify.new_password_confirmation" placeholder="请再次输入新密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading='adminModify_btn' @click="submitForm('adminModify')">确定</el-button>
                    <el-button @click="resetForm('adminModify')">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {ApipasswordChange, ApipasswordReset, Apilogout } from '@/api'
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.userModify.new_password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.adminModify.new_password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return{
            adminModify_btn: false,
            userModify_btn: false,
            //用户修改密码
            userModify:{
                old_password: '',
                new_password: '',
                new_password_confirmation: ''
            },
            userRrules:{
                old_password:[ 
                    {required: true, message: '请输入旧密码', trigger: 'blur'}
                ],
                new_password:[ 
                    {required: true, message: '请输入新密码', trigger: 'blur'}
                ],
                new_password_confirmation:[ 
                    {validator: validatePass,required: true, trigger: 'blur'}
                ],
            },
            adminRules:{
                new_password:[ 
                    {required: true, message: '请输入新密码', trigger: 'blur'}
                ],
                new_password_confirmation:[ 
                    {validator: validatePass2, trigger: 'blur',required: true,}
                ],
                employee_code:[
                    {required: true, message: '请输入职员工号', trigger: 'blur'}
                ]
            },
            //管理员重置密码
            adminModify:{
                employee_code: "",
                new_password: "",
                new_password_confirmation: ''
            }
        }
    },
    methods:{
        submitForm(ele){
            this.$refs[ele].validate((valid) => {
                if (valid) {
                    const loadingBtn = ele + '_btn'
                    const modify = ele === 'userModify'
                    const password = modify ? ApipasswordChange : ApipasswordReset
                    this[loadingBtn] = true
                    password(this[ele]).then(res => {
                        this[loadingBtn] = false
                        if(modify){
                            Apilogout().then(res => {
                                sessionStorage.clear()
                                // this.claerInfo()
                                this.$message.success('修改成功，请重新登录！')
                                this.$router.push('/login')
                                setTimeout(()=>{
                                    location.reload()
                                },800)
                                
                            })
                        }else{
                            this.$message.success('修改成功！')
                        }
                        this.resetForm(ele)
                    }).catch(()=>{
                        this.$message.error('修改失败！')
                        this[loadingBtn] = false
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(ele){
            this.$refs[ele].resetFields();
        }
    }
}
</script>

<style lang='less'>
.userCenter{
    .el-input{
        width: 200px;
    }
}
</style>